<template>
	<view class='mx-3-1 mt-2-2 h-full flex flex-column'>
		<SearchInput @confirm="doSearch" @change="keywordChange"/>
		<view class='mt-6-2' v-show="!noData && !searching && searchResult.length === 0">
			<view class='mb-3'>
				<text>热门搜索</text>
			</view>
			<view class="flex flex-row">
				<view class='bg-1 rounded-n px-3 py-1-3 mr-2-2'>
					<text class='color-secondary-4'>拼多多</text>
				</view>
				<view class='bg-1 rounded-n px-3 py-1-3'>
					<text class='color-secondary-4'>拼多多</text>
				</view>
			</view>
			
			<view class='mt-6-2 mb-3 flex items-center'>
				<text class='flex-1'>搜索记录</text>
				<view class='text-n color-secondary-3 flex items-center' hover-class="opacity-50">
					<text class='iconfont icon-delete mr-0-3'></text>
					<text>清空记录</text>
				</view>
			</view>
			<view class="flex flex-row">
				<view class='bg-1 rounded-n px-3 py-1-3 mr-2-2'>
					<text class='color-secondary-4'>拼多多</text>
				</view>
				<view class='bg-1 rounded-n px-3 py-1-3'>
					<text class='color-secondary-4'>拼多多</text>
				</view>
			</view>
		</view>
		<view v-show="searching" class='pt-10 text-center'>
			<text>搜索中...</text>
		</view>
		<view class='mt-2-2' v-if="searchResult.length > 0 && keyword">
			<Tab :data="searchResult">
				<template #tab0>
					<ArticleList :data="articleData"></ArticleList>
				</template>
				<template #tab1>
					<text>member</text>
				</template>
			</Tab>
		</view>
		<view class='flex-1' v-show="noData">
			<Empty message="暂无匹配结果，试试其他关键词吧"/>
		</view>
	</view>
</template>

<script>
	import SearchInput from "@/components/SearchInput.vue";
	import Tab from "@/components/common/Tab.vue";
	import Empty from "@/components/common/Empty.vue";
	import ArticleList from "@/components/ArticleList.vue";
	import { ref, watch } from "vue";
	export default {
		components: {
			SearchInput,
			Tab,
			Empty,
			ArticleList
		},
		setup(){
			const searching = ref(false);
			const keyword = ref("");
			function keywordChange(val){
				keyword.value = val;
			}
			const searchResult = ref([]);
			const noData= ref(false);
			watch(keyword,() => {
				if(searchResult.value.length > 0){
					searchResult.value = [];
				}
				noData.value = false;
			});
			function doSearch(){
				if(keyword.value && !searching.value){
					searching.value = true;
					setTimeout(() => {
						searching.value = false;
						// noData.value = true;
						searchResult.value = [{
							title: '资料',
						},{
							title: '会员',
						}];
					},1500);
				}
			}
			const articleData = ref([
				{
					src: "/static/test/111.png",
					title: "玩转传统企业互联网转型内参会玩转传统企业互联网转型内参会玩转传统企业互联网转型内参会玩转传统企业互联网转型内参会分",
					label: '互联网转型',
					type: '传统企业',
					date: '2021-10-12'
				},{
					src: "/static/test/111.png",
					title: "玩转传统企业互联网转型内参会玩转传统企业互联网转型内参会玩转传统企业互联网转型内参会玩转传统企业互联网转型内参会分",
					label: '互联网转型',
					type: '传统企业',
					date: '2021-10-12'
				},{
					src: "/static/test/111.png",
					title: "玩转传统企业互联网转型内参会玩转传统企业互联网转型内参会玩转传统企业互联网转型内参会玩转传统企业互联网转型内参会分",
					label: '互联网转型',
					type: '传统企业',
					date: '2021-10-12'
				},{
					src: "/static/test/111.png",
					title: "玩转传统企业互联网转型内参会玩转传统企业互联网转型内参会玩转传统企业互联网转型内参会玩转传统企业互联网转型内参会分",
					label: '互联网转型',
					type: '传统企业',
					date: '2021-10-12'
				},{
					src: "/static/test/111.png",
					title: "玩转传统企业互联网转型内参会玩转传统企业互联网转型内参会玩转传统企业互联网转型内参会玩转传统企业互联网转型内参会分",
					label: '互联网转型',
					type: '传统企业',
					date: '2021-10-12'
				},
			]);
			return {
				keyword,
				searching,
				doSearch,
				searchResult,
				noData,
				articleData,
				keywordChange
			}
		}
	}
</script>

<style>
	page{height: 100%;}
</style>
